<template>
<div class="index">
    <!-- 桌面模块 -->
    <div class="desktop">
        <template v-for="app in app_data">
                <div v-if="app.is_desk" :key="app.ref" :ref="app.ref+'_ico'"  :style="{margin: '17px'}"
                    @dblclick="this.$router.push(app.src),!openedApps.includes(app.ref)&&openedApps.push(app.ref)">
                    <div class="desk_ico" :style="{backgroundImage: 'url(/src/assets/img/app/' + app.ref + '.ico)',backgroundSize: '48px 48px'}"></div>
                    <div :style="{color: 'white'}">{{ app.name }}</div>
                </div>
                
            </template>
    </div>
    <!-- 任务栏 -->
    <div id="bottom_bar" class="bottom_bar">       
        <div id="start_menu" class="btn open" :class="{ 'act': start_menu_show }" @click.self="switch_startMenu"
            @blur="start_menu_show=false" tabindex="-1" ref="start_menu" >
            <!-- 开始菜单 -->
            <div class="start_menu" v-show="start_menu_show">
                <div class="lr-box">
                    <div class="l-box">
                        <div class="app" @click="applist.app ++">111</div>
                        <span></span>
                        <template v-for="app in app_data">
                            <div v-if="app.is_bar" class="app" :key="app.ref" 
                                @click="start_menu_show=false,this.$router.push(app.src),!openedApps.includes(app.ref)&&openedApps.push(app.ref)"
                                :style="{backgroundImage: 'url(/src/assets/img/app/' + app.ref + '.ico)',backgroundSize: '32px 32px'}">
                                {{ app.name }}
                            </div>
                        </template>
                        <div class="zw"></div>
                        <span></span>
                        <div class="app show_all_apps" >所有程序</div>
                    </div>
                    <div class="r-box">
                        <div class="user_pic"><img src="/src/assets/img/ui/user_pic.png" alt="user_pic"></div>
                        <div class="app">Administrator</div>
                        <div class="app">文档</div>
                        <span></span>
                        <div class="app">计算机</div>
                        <div class="app">网络</div>
                        <span></span>
                        <div class="app">控制面板</div>
                        <div class="app">设备和打印机</div>
                        <div class="app">管理工具</div>
                        <div class="app">帮助和支持</div>
                        <div class="app">运行...</div>
                        <span></span>
                        <div class="app">Windows 安全</div>
                    </div>
                </div>
                <div class="b-box">
                    <input type="text" placeholder=" 搜索程序和文件" v-model="search_app_input" disabled="true">
                    <div class="search"></div>
                    <div class="logout">注销</div>
                </div>
            </div>
        </div>
        <div id="app_bar"> <!-- 任务图标 -->
            <!-- 遍历app_data，展示app的按钮图标 -->
            <template v-for="app in app_data">
                <div v-if="app.is_bar" class="btn" :key="app.ref" :ref="app.ref+'_btu'" :title="app.name" 
                    :class="{ 'open':openedApps.includes(app.ref), 'act':this.$route.path===app.src }" 
                    @click="this.$router.push(app.src),!openedApps.includes(app.ref)&&openedApps.push(app.ref),this.$route.path===app.src&&this.$router.push('/')"
                    :style="{backgroundImage: 'url(/src/assets/img/app/' + app.ref + '.ico)',backgroundSize: '32px 32px'}">
                    </div>
            </template>
            {{ openedApps.toString() }}{{ openedApps.indexOf(this.$route.path.split('/').pop()) }}
        </div>
        <div id="task_bar"></div>
    </div>
    <!-- app的展示框（路由） -->
    <div class="appbox" :class="{ 'max': appbox_ismax }" v-show="this.$route.path.indexOf('app/')==1">
        <div class="title">
            <div class="app_logo" :style="{backgroundImage: 'url(/src/assets/img' + this.$route.path + '.ico)'}"></div>
            <div class="app_name">{{ this.$route.path }}</div>
            <!-- 最小化按钮 -->
            <button @click="this.$router.push('/')"><el-icon><Minus /></el-icon></button>
            <!-- 调整尺寸按钮 -->
            <button @click="appbox_ismax=appbox_ismax ? false : true">
                <el-icon v-if="appbox_ismax"><CopyDocument /></el-icon>
                <el-icon v-else><FullScreen /></el-icon>
            </button>
            <!-- 关闭按钮 -->
            <button @click="openedApps.splice(openedApps.indexOf(this.$route.path.split('/').pop()),1),
                this.$router.push('/')"><el-icon><Close /></el-icon></button>
        </div>
        <!-- 路由页面 -->
        <router-view v-slot="{ Component }"><!--  v-if="!iframeApps.includes(bottomar.activeApp)" -->
            <keep-alive :include="openedApps.toString()">
                <component :is="Component" />
            </keep-alive>
        </router-view>
        <!-- iframe页面 -->
        <!-- <component
            v-for="item in hasOpenComponentsArr"
            :key="item.name"
            :is="item.name"
            v-show="this.$route.path.indexOf('app/'+item.name)==1"
        ></component> -->
        <template ><!-- v-for="item in hasOpenIframeApps" -->
        <div> ddd</div>
        </template>

        <!-- <div ref="test"></div> -->
        <!-- <keep-alive >
            <component :is="activeApp"></component>
        </keep-alive> -->
    </div>
    <!-- <Desktop />
    <BottomBar ref="bottomar"/>
    <AppBox ref="appbox"/>
    <AppList ref="applist"/> -->
    <!-- <button @click="open_app">ddd</button> -->
</div>
</template>

<script>
// import { markRaw } from 'vue'
// const loadApp = value => import(`~/pages/apps/${value}.vue`);
// import { ref } from 'vue'
import Login from '~/pages/login.vue'
// import AppList from '~/pages/app_list.vue'
// import AppBox from '~/pages/app_box.vue'

export default {
    data() {
        return {
            app_data: [
                {'name':'控制面板','src':'/app/config','ref':'config','is_desk':true,'is_bar':true},
                {'name':'EMMS','src':'/app/emms','ref':'emms','is_desk':true,'is_bar':true},
                {'name':'ddd','src':'/app/ddd','ref':'ddd','is_desk':true,'is_bar':true},
                {'name':'clock','src':'/app/clock','ref':'clock','is_desk':true,'is_bar':true},
            ],
            // apps: {
            //     '控制面板': {'ico':'273.ico','is_desk':true,'is_bar':true},
            //     'EMMS': {'ico':'emms.ico','is_desk':true,'is_bar':true},
            //     'ddd': {'ico':'522.ico','is_desk':true,'is_bar':true},
            //     'clock': {'ico':'clock.ico','is_desk':true,'is_bar':true},
            // },
            openedApps: [],
            start_menu_show: false,
            appbox_show: false,
            appbox_ismax: false,
            // activeApp: null,
            search_app_input: '',
            iframeApps: ['EMMS',Login],
        }
    },
    components: ({
        // 'BottomBar': BottomBar,
        // 'Desktop': Desktop,
        // 'AppList': AppList,
        // 'AppBox': AppBox,
    }),
    methods: {
        // 切换开始菜单
        switch_startMenu() {
            if (!this.start_menu_show) {
                this.start_menu_show = true;
                this.$nextTick(() => {
                    this.$refs.start_menu.focus();
                });   
            } else {
                this.start_menu_show = false;
            }
        },
        openApp(name) {
            // console.log(name+'is opening');
            // 如果已经打开，则激活
            // this.$refs.test.append('dd');
            if (this.openedApps.includes(name)) {
                if (this.$route.path.indexOf('app/'+name)==1) {// 如果正激活
                    this.$router.push('/');
                } else {
                    this.$router.push('/app/'+name);
                }
            // 找不到name的情况下,创建
            } else {
                this.$router.push('/app/'+name);
                this.openedApps.push(name);
            };

        },
        nnn() {
            console.log('dede');
        },
    },
    // computed: {
    //     // 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
    //     hasOpenComponentsArr() {
    //         return this.iframeApps.filter(item => item.loadApp);
    //     }
    // },
    // 监控某个变量的变化，来调用引入组件的函数
    // watch: {
    //     'bottomar.activeApp':{
    //         handler(new_app_name, old_app_name){
    //             if (new_app_name=='close') {
    //                 this.activeAppNames.splice(this.activeAppNames.indexOf(old_app_name),1);
    //                 this.$parent.apps[old_app_name].is_open = false;
    //                 for (let key in this.$parent.apps) {
    //                     if (key==new_app_name) {
    //                         this.$parent.apps[key].is_act = true;
    //                     } else {
    //                         this.$parent.apps[key].is_act = false;
    //                     };
    //                 };
    //                 this.activeApp = null;
    //                 this.is_show = false;
    //                 return
    //             };
    //             if (new_app_name) {
    //                 console.log(new_app_name);
    //                 loadApp(new_app_name).then(component => {
    //                     // this.$destroy(old_app_name);
    //                     this.activeApp = markRaw(component.default);
    //                 });
    //                 return
    //             };
    //             // this.activeApp = null;
    //             // this.is_show = false;

    //         },
    //         // immediate: true
    //     }
    // },
}

    
</script>

<style scoped lang="scss">
* {
    background-position: center center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    text-align: center;
    cursor: default;
    font-size: 12px;
    font-weight: 300;
}
// 桌面
.desktop {
    flex: 1;
    display: grid;
    grid-auto-columns: 82px;
    grid-auto-rows: 96px;
}
.desk_ico {
    width: 48px;
    height: 48px;
}
.index {
    min-height: 100vh;
    // background-image: url('~/assets/img/bg.jpg');
    // background-size: cover;
    background-color: var(--cd_desktop);
    display: flex;
    flex-direction: column;
}
// 任务栏 样式
.bottom_bar {
    // height: 42px;
    padding: 2px;
    background-color: var(--cd1);
    border-top: solid 1px var(--cd0);
    box-shadow: 0 -1px var(--cd1);
    display: flex;
    align-items: center;
}
.btn {
    width: 43px;
    height: 34px;
    margin: 2px 4px 2px 2px;
    line-height: 34px;
    display: inline-block;
    #app_bar & {
        width: 44px;
    }
    &.act {
        box-shadow: -.5px -.5px 0 .5px var(--cd2),
                    0 0 0 1px var(--cd1),
                    -.5px -.5px 0 1.5px var(--cd3),
                    0 0 0 2px var(--cd0);
        #app_bar & {
            background-color: var(--cd0);
        };
    }
    &.open:not(.act), &:not(.act):hover {
        box-shadow: -.5px -.5px 0 .5px var(--cd1),
                    0 0 0 1px var(--cd2),
                    -.5px -.5px 0 1.5px var(--cd0),
                    0 0 0 2px var(--cd3);
        };
}
#start_menu { /* 开始菜单 */
    background-image: url(~/assets/img/ui/start_menu.png);
}
#app_bar {
    flex: 1;
    margin: 0 7px;
    display: flex;
}
#task_bar { /* 任务栏 */
    height: 36px;
    margin: 1px;
    box-shadow: -.5px -.5px 0 .5px var(--cd2),
                0 0 0 1px var(--cd0);
    padding-left: 6px;
    display: flex;
}
// 开始菜单
.start_menu {
    display: flex;
    cursor: default;
    outline: none;
    flex-direction: column;
    background-color: var(--cd1);
    position: absolute;
    padding: 2px;
    bottom: 46px;
    left: 2px;
    width: 400px;
    height: 612px;
    box-sizing: border-box;
    box-shadow: -.5px -.5px 0 .5px var(--cd0),
                0 0 0 1px var(--cd2),
                -.5px -.5px 0 1.5px var(--cd1),
                0 0 0 2px var(--cd3);
    z-index: 99;
    .lr-box {
        flex: 1;
        border-bottom: solid 1px var(--cd2);
        display: flex;
        span {
            width: 100%;
            border-top: solid 1px var(--cd2);
            border-bottom: solid 1px var(--cd0);
            margin: 1px 0;
        }
        .l-box {
            width: 251px;
            border-right: solid 1px var(--cd2);
            padding: 3px 5px 1px 5px;
            display: flex;
            flex-direction: column;
            .app {
                height: 35px;
                line-height: 35px;
                margin: 1px 2px 1px 0;
                padding-left: 37px;
                text-align: left;
                position: relative;
                background-position: 2px center;
                background-repeat: no-repeat;
                // &:not(.show_all_apps){
                //     background-image: url(~/assets/img/1106.ico);
                // }
                &.show_all_apps {
                    margin: 0;
                    &::before {
                        content: '▸';
                        position: absolute;
                        left: 0;
                    };
                }
                &:hover {
                    background-color: var(--cd4);
                    color: var(--cd0);
                }
            };
            .zw {
                flex: 1;
            }
        };
        .r-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            // align-items: center;
            border-left: solid 1px var(--cd0);
            padding: 0 1px 0 3px;
            .user_pic {
                height: 61px;
                margin: 5px 0;
                display: flex;
                justify-content: center;
                img {
                    cursor: pointer;
                };
                // background-image: url(~/assets/img/user_pic.png);
            };

        .app {
                height: 31px;
                // width: 100%;
                line-height: 31px;
                margin: 1px 0 1px 0;
                padding-left: 7px;
                text-align: left;
                &:hover {
                    background-color: var(--cd4);
                    color: var(--cd0);
                }
            };
        };
    }
    .b-box {
        height: 32px;
        border-top: solid 1px var(--cd0);
        display: flex;
        align-items: center;
        input {
            float: left;
            width: 216px;
            height: 18px;
            margin: 5px 3px 5px 7px;
            padding-left: 3px;
            box-shadow: -.5px -.5px 0 .5px var(--cd2),
                        0 0 0 1px var(--cd1),
                        -.5px -.5px 0 1.5px var(--cd3),
                        0 0 0 2px var(--cd0);
            border: none;

            text-align: left;
            &::placeholder {
                color: black;
            };
        };
        .search {
                height: 21px;
                width: 21px;
                background-image: url(~/assets/img/ui/search_btu.png);
                border-radius: 3px;
                &:hover {
                    filter: brightness(1.2);
                }
            };
        .logout {
            width: 42px;
            height: 19px;
            margin-left: 10px;
            line-height: 19px;
            position: relative;
            box-shadow: -.5px -.5px 0 .5px var(--cd1),
                        0 0 0 1px var(--cd2),
                        -.5px -.5px 0 1.5px var(--cd0),
                        0 0 0 2px var(--cd3);
            &::after {
                content: '▸';
                // transform: scale(.5);
                display: block;
                position: absolute;
                height: 19px;
                width: 10px;
                top: 0;
                left: 45px;
                box-shadow: -.5px -.5px 0 .5px var(--cd1),
                            0 0 0 1px var(--cd2),
                            -.5px -.5px 0 1.5px var(--cd0),
                            0 0 0 2px var(--cd3);
            }
        };
    }
}
// app的显示窗口
.appbox {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background-color: var(--cd0);
    border: 2px solid var(--cd1);
    z-index: 1;
    box-shadow: -.5px -.5px 0 .5px var(--cd0),
                0 0 0 1px var(--cd2),
                -.5px -.5px 0 1.5px var(--cd1),
                0 0 0 2px var(--cd3);
    &.max {
        top: 0;
        left: 0;
        right: 0;
        bottom: 44px;
        border: 0
    };
}
.title {
    background-color: var(--cd4);
    height: 19px;
    border-top: solid 1px var(--cd3);
    border-bottom: solid 1px var(--cd2);
    display: flex;
    align-items: center;
    font-size: 13px;
    .app_logo {
        height: 17px;
        width: 17px;
        background: url() no-repeat center center;
        display: inline-block;
        background-size: 17px;
        margin: 0 10px;
    }
    .app_name {
        flex: 1;
        line-height: 17px;
        color: var(--cd0);
        font-weight: 700;
        padding: 0 4px;
        letter-spacing: 2px;
        text-align: left;
    }
    button {
        background-color: var(--cd1);
        height: 13px;
        width: 16px;
        font-weight: 700;
        line-height: 13px;
        text-align: center;
        border-right: solid 1px var(--cd2);
        border-bottom: solid 1px var(--cd2);
        border-top: solid 1px var(--cd0);
        border-left: solid 1px var(--cd0);
        margin-right: 2px;
    }
}
</style>